<template>
  <div class="dashboard-container">
    <!-- 顶部区域 -->
    <div class="top-section">
      <!-- 左侧图表 -->
      <div class="left-section">
        <div ref="chart1" class="chart-container">
          <visOne></visOne>
        </div>
        <div ref="chart2" class="chart-container">
          <VisFour></VisFour>
        </div>
      </div>

      <!-- 中间图表 -->
      <div class="center-section">
        <div ref="chart3" class="chart-container">
          <VisFive></VisFive>
        </div>
      </div>

      <!-- 右侧图表 -->
      <div class="right-section">
        <div ref="chart4" class="chart-container">
          <VisTwo></VisTwo>
        </div>
        <div ref="chart5" class="chart-container">
          <VisThree></VisThree>
        </div>
      </div>
    </div>

    <!-- 底部区域 -->
    <div class="bottom-section">
      <div ref="chart6" class="chart-container">
          <VisSix></VisSix>
      </div>
      <div ref="chart7" class="chart-container">
          <VisSeven></VisSeven>
      </div>
      <div ref="chart8" class="chart-container">
          <VisEight></VisEight>
      </div>
      <div ref="chart9" class="chart-container">
          <VisNine></VisNine>
      </div>
    </div>
  </div>
</template>

<script>
import visOne from '@/views/visualIargeScreen/components/VisOne.vue'
import VisTwo from '@/views/visualIargeScreen/components/VisTwo.vue'
import VisThree from '@/views/visualIargeScreen/components/VisThree.vue'
import VisFour from '@/views/visualIargeScreen/components/VisFour.vue'
import VisFive from '@/views/visualIargeScreen/components/VisFive.vue'
import VisSix from '@/views/visualIargeScreen/components/VisSix.vue'
import VisSeven from '@/views/visualIargeScreen/components/VisSeven.vue'
import VisEight from '@/views/visualIargeScreen/components/VisEight.vue'
import VisNine from '@/views/visualIargeScreen/components/VisNine.vue'


export default {
  name: 'VisualIargeScreen',
  components: {
    "visOne": visOne,
    "VisTwo": VisTwo,
    "VisThree": VisThree,
    "VisFour": VisFour,
    "VisFive": VisFive,
    "VisSix": VisSix,
    "VisSeven": VisSeven,
    "VisEight": VisEight,
    "VisNine": VisNine,
  }
}
</script>

<style scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.top-section {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.left-section, .right-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-section {
  display: flex;
}

.bottom-section {
  height: 30vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.chart-container {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  background-color: rgb(59, 57, 57);
  border-radius: 10px;
  padding: 4px;
  box-sizing: border-box;
}

/* 响应式适配 */
@media (max-width: 1600px) {
  .top-section {
    grid-template-columns: 1.2fr 2fr 1.2fr;
  }
}
</style>